import React from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { SubPageLayout } from '../components';
import {
  ContainerOutlined,
  ClusterOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';

// 容器服务子页面
import ContainerHome from '../views/containers/ContainerHome';
import ContainerImages from '../views/containers/ContainerImages';
import ClusterManage from '../views/containers/ClusterManage';

const ContainersRouter: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 侧边栏菜单配置
  const menuItems = [
    {
      key: '/app/containers',
      icon: <ContainerOutlined />,
      label: '容器概览',
    },
    {
      key: '/app/containers/images',
      icon: <DatabaseOutlined />,
      label: '镜像仓库',
    },
    {
      key: '/app/containers/cluster',
      icon: <ClusterOutlined />,
      label: 'K8S集群',
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <SubPageLayout
      menuItems={menuItems}
      selectedKeys={[location.pathname]}
      onMenuClick={handleMenuClick}
      defaultCollapsed={false}
    >
      <Routes>
        {/* 容器服务首页 */}
        <Route index element={<ContainerHome />} />
        
        {/* 镜像仓库 */}
        <Route path="images" element={<ContainerImages />} />
        
        {/* K8S集群管理 */}
        <Route path="cluster" element={<ClusterManage />} />

        {/* 其他未匹配的路由重定向到首页 */}
        <Route path="*" element={<Navigate to="/app/containers" replace />} />
      </Routes>
    </SubPageLayout>
  );
};

export default ContainersRouter; 